<template>
  <div class="operation-log" style="height: 100%">
    <div class="left-container left-box">
      <!-- <div class="search">
        <el-input
          v-model="stationName"
          placeholder="请输入站点名称名称"
          clearable
        />
      </div> -->
      <div class="station-list">
        <div
          class="station-item"
          v-for="item in typeList"
          :key="item.id"
          :class="{ active: typeId === item.id }"
          @click="handleTypeClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right-box">
      <mTableLayout>
        <template #form>
          <mForm
            :configs="formConfigs"
            :col="3"
            :formData="formData"
            @search="onSearch"
          >
            <template #startTime>
              <el-date-picker
                v-model="formData.startTime"
                type="datetime"
                placeholder="请选择开始时间"
              />
            </template>
            <template #endTime>
              <el-date-picker
                v-model="formData.endTime"
                type="datetime"
                placeholder="请选择结束时间"
              />
            </template>
          </mForm>
        </template>
        <template #page-subtitle>
          <!-- <el-button
            type="danger"
            @click="batchDelete"
            :disabled="selectionData.length === 0"
            icon="Delete"
            >删除</el-button
          > -->
        </template>
        <!--template #op-btn>
          <el-button @click="batchExport" icon="Download">批量导出</el-button>
        </template-->
        <template #table>
          <mTable
            ref="mTableRef"
            :tableHeader="tableHeader"
            :tableData="tableData"
            :adapter="tableAjax"
            @selection-change="handleSelectionChange"
          >
            <template #handle="{ row }">
              <el-button type="primary" link @click="handleAssignProject(row)">
                导出
              </el-button>
            </template>
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                style="padding: 0"
                @click="handleUpdate(row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                link
                style="padding: 0"
                @click="handleDelete(row.id)"
              >
                删除
              </el-button>
            </template>
          </mTable>
        </template>
      </mTableLayout>
    </div>
  </div>
</template>
<script setup>
import { loginTableHeader, exportTableHeader, formConfigs } from "./config";
import { ref, onMounted, computed, watch } from "vue";
import { loginLogsList, exportLogsList } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import {useAppStore} from "@/stores/app.js";
const route = useRoute();
defineOptions({
  name: "DataList",
});
const typeList = ref([
  { name: "登录记录", id: 1 },
  { name: "导出记录", id: 2 },
]);
// 路由参数
const routeType = ref("");
const typeId = ref(1);
const tableHeader = computed(() => {
  return typeId.value === 1 ? loginTableHeader : exportTableHeader;
});
const appStore = useAppStore();
const formData = ref({
  startTime: "",
  endTime: "",
});

const mTableRef = ref(null);
const total = ref(0);
const selectionData = ref([]);
const tableData = ref([]);
onMounted(() => {

  mTableRef.value.fetchData(true);

});
const onSearch = (data) => {
  console.log(data.value);
  mTableRef.value.fetchData(true);
};
const handleTypeClick = (item) => {
  if (item.id === typeId.value) {
    return;
  }
  typeId.value = item.id;
  mTableRef.value.fetchData(true);
};
// 列表请求
const tableAjax = async ({ pageSize, currentPage }) => {
  let o = {
    pageSize,
    page: currentPage,
    ...formData.value,
  };
  if (typeId.value == 1) {
    var res = await loginLogsList(o);
  } else {
    var res = await exportLogsList(o);
  }
  console.log(res, "res");
  if (res.code == 0) {
    tableData.value = res.data;
    total.value = res.count || 0;
  }
  return {
    data: res.data,
    total: res.count || 0,
  };
};

//导出文件跳转下载
const handleAssignProject = (row) => {
  console.log(row);
  //window.location.href = "";
};

const batchExport = () => {
  console.log("批量导出");
};

// 页面上勾选的数据选择
const handleSelectionChange = (val) => {
  selectionData.value = val;
};
watch(
  () => route.query,
  (newVal) => {
    if (routeType.value !== newVal.type) {
      console.log(newVal.type, "我是newVal operationLog");
      // 在这里切换不同的表格或者重新查询数据等
    }
    routeType.value = newVal.type;
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style scoped lang="scss">
:deep(.demo-form-inline) {
  .el-input,
  .el-select {
    width: 220px;
  }
}
.operation-log {
  display: flex;
  height: 100%;
  .right-box {
    flex: 1;
    height: 100%;
    padding: 12px;
    padding-left: 12px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
  }
}
</style>
